<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<title>巡检任务列表</title>
<link rel="stylesheet" href="../../css/s_plus.css" />
<link rel="stylesheet" href="../../css/base.css" />
<link rel="stylesheet" href="../../css/layout.css" />
<link rel="stylesheet" href="../../css/choice.css" />

<link rel="stylesheet" href="../../css/hui.css" />

<script type="text/javascript" src="../../libs/vue.js" ></script>
<script type="text/javascript" src="../../js/jquery.1.9.1.min.js" ></script>
<script type="text/javascript" src="../../js/app/url.js" ></script>
<script type="text/javascript" src="../../js/app/api.js"></script>
<script type="text/javascript" src="../../js/control/pop.js"></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<!--<script type="text/javascript" src="../work/menu.js"></script>
-->
<script type="text/javascript" src="../../js/control/mescroll/mescroll.min.js"></script>
<link rel="stylesheet" href="../../js/control/mescroll/mescroll.min.css" />
<style>
	.mescroll{
				position: fixed;
				top: 60px;
				bottom: 0;
				height: auto;
			}
</style>

</head>
<body class="bg_gray">
	<div id="wrapper">
<header class="f_l maxbox subhead">
  <a class="back" @click="back"><i class="iconfont">&#xe605;</i></a>
  <h1>巡检任务列表</h1>
  <!--<a class="f_r arrow_r" href="javascript:void(0);"><i class="iconfont">&#xe611;</i></a>
  <ul class="head_nav">
    <li><a @click="gisMap">地图模式</a></li>
    <li><a @click="ins_list">列表模式</a></li>
  </ul>-->
</header>


  <!--<header class="f_l maxbox header">
        <a class="side_arrow f_l arrow_l" data-effect="sidebtn"><i class="iconfont">&#xe600;</i></a>
        <h1 class="f_l">
          <a  @click="gisMap">
            <i class="iconfont">&#xe608;</i>
            <b>GIS地图</b>
          </a>
          <a class="cur" @click="ins_list">
            <i class="iconfont">&#xe61f;</i>
            <b>任务列表</b>
          </a>
        </h1>
    
      </header>-->


	<div id="myscroll" class="mescroll" >

<div>
<!--<section class="f_l maxbox search_top">
  <div class="f_l searchbar">
    <input class="search_key" name="" type="text" placeholder="请输入关键字">
    <button class="search_btn" name=""><i class="iconfont">&#xe63e;</i></button>
  </div>
</section>-->

  <section class="f_l mar_t maxbox work_list">
    <dl v-for="item in lists">
      <a @click="detail(item.id)">
        <dt>
           <i class="iconfont bg_orange">&#xe61d;</i>
          <b>{{item.name}}</b>
        </dt>
        <dd class="txt_list">
          <p><em>处理状态：</em>{{showState(item.state)}}</p>
          <p><em>巡检种类：</em>{{showType(item.type)}}</p>
          <p><em>时间：</em>{{item.startTime}} ~ {{item.endTime}}</p>
        </dd>
      </a>
    </dl>
    <!--<dl>
      <a href="">
        <dt>
          <i class="iconfont bg_orange">&#xe61d;</i>
          <b>施工-维护</b>
        </dt>
        <dd class="txt_list">
          <p><em>设备类型：</em>无线人井</p>
          <p><em>工程名称：</em>灌木街十月维护</p>
          <p><em>设备编号：</em>NO7894678</p>
          <p><em>告警时间：</em>2018-05-10 10:30:25</p>
          <p><em>设备地址：</em><span class="blue">长沙芙蓉区东湖大道1000号附近<i class="iconfont mar_l">&#xe617;</i></span></p>
        </dd>
      </a>
    </dl>
    <dl>
      <a href="">
        <dt>
          <i class="iconfont bg_orange">&#xe61d;</i>
          <b>施工-维护</b>
        </dt>
        <dd class="txt_list">
          <p><em>设备类型：</em>无线人井</p>
          <p><em>工程名称：</em>灌木街十月维护</p>
          <p><em>设备编号：</em>NO7894678</p>
          <p><em>告警时间：</em>2018-05-10 10:30:25</p>
          <p><em>设备地址：</em><span class="blue">长沙芙蓉区东湖大道1000号附近<i class="iconfont mar_l">&#xe617;</i></span></p>
          <p><em>处理结果：</em>已出场，无需开锁</p>
        </dd>
      </a>
    </dl>-->
    </section>
    
    <div id="no_data"></div>
    </div>
    </div>
   
   </div>
    <script type="text/javascript" src="../../libs/hui.js" ></script>

    <script>
  

  
  $(function(){
  		





  	var path = urlManager.inspection_list();
  	var username=	localStorage.getItem("username");
	var sec= localStorage.getItem("sec_pwd");
  	var time = apiManage.getNow();
  	var key = "loginName="+username+"&passWord="+sec+"&time="+time;
  	var paramKey=hex_md5(key);
  	var jsonParam = JSON.stringify({loginName:username,time:time,key:paramKey});
  	console.log(jsonParam);

    	var sp = new Vue({
				el:"#wrapper",
				data:{
					lists:[]
			
				},
					methods:{
						detail:function(pid){
							localStorage.setItem("taskId",pid);
														localStorage.setItem("type","normal");

									hui.open("track_task_show.html?time"+apiManage.getNow(), {}, true, {});	

						},
						back:function(){
							
							hui.open("inspection.html?time"+apiManage.getNow(), {}, true, {});	

						},
						
						geshi:function(param){
							return formatTime(param);
						},
						showType:function(param){
//							0：日巡检 1：周巡检 2：月巡检
							if(param=='0'){
								return "日巡检";
							}
							else if(param=='1'){
								return "周巡检 ";
							}
							else{
								return "月巡检";

							}
						},
							showState:function(param){
//								0下发 1接收 2处理
							if(param=='0'){
								return "下发";
							}
							else if(param=='1'){
								return "接收";
							}
							else{
								return "处理";

							}
						},
						
						show:function(zdCode){
							localStorage.setItem("zdCode",zdCode);
							hui.open("alerm_show.html?time"+apiManage.getNow(), {}, true, {});	
						},
					
					
						gisMap:function(){
							hui.open("inspection_map.html", {}, true, {});
						}
						,
						ins_list:function(){
							hui.open("inspection_list.html", {}, true, {});
						}
				
					}
					,
		mounted: function() {
			//创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
				//解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
				var self = this;
				self.mescroll = new MeScroll("myscroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
					up: {
						auto : true,
						callback: refreshData,
						isBounce: true,
						empty: {
							warpId: "no_data",							
							tip: "-------暂无数据-------"
						},
					}
				});

		}
				
    	
    	});
				
				
				function refreshData(page){
					
					console.log("参数:"+JSON.stringify({pageNo:page.num,pageSize:10}));
						$.ajax({
		         type: "GET",
		         url: path,
//		         data:{pageNo:page.num,pageSize:10},
		         beforeSend: function(request) {
		            request.setRequestHeader("loginName",username);
		            request.setRequestHeader("time",time);
		            request.setRequestHeader("sign",paramKey);
		            request.setRequestHeader("Content-Type","application/text");
		
		         },
		         success: function(result) {
		             console.log("巡检任务列表:"+JSON.stringify(result));
		             
		             var datas=result.data;
		           
		            if(datas != null) {
					//如果是第一页需手动制空列表 (代替clearId和clearEmptyId的配置)
					if(page.num == 1) {
						sp.lists = [];
					};
					//更新列表数据
					if(page.num<2){//只查当天的 数据不多 不用做分页
						
						var l = sp.lists;
						l = l.concat(datas);
						sp.lists = l;
					}
					if(sp.lists.length<10){
			            sp.mescroll.endSuccess(sp.lists.length, false);
					}
					else{
			            sp.mescroll.endSuccess(sp.lists.length, true);
					}
					

				} else{
					sp.lists = null;
					sp.mescroll.endErr();
				}				 
		           
		           
		             
		         }
		     });
					

	}	

//document.getElementById("mescroll").style.height="500px";
 
	        Date.prototype.format = function (format) //author: meizz
	    {
	        var o = {
	            "M+": this.getMonth() + 1, //month
	            "d+": this.getDate(),    //day
	            "h+": this.getHours(),   //hour
	            "m+": this.getMinutes(), //minute
	            "s+": this.getSeconds(), //second
	            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
	            "S": this.getMilliseconds() //millisecond
	        }
	        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
	        (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	        for (var k in o) if (new RegExp("(" + k + ")").test(format))
	            format = format.replace(RegExp.$1,
	          RegExp.$1.length == 1 ? o[k] :
	            ("00" + o[k]).substr(("" + o[k]).length));
	        return format;
	    }

	    function formatTime(val) {
	    	if(val==null||val==''){
	    		return "";
	    	}
	        var re = /-?\d+/;
	        var m = re.exec(val);
//	         m = m.replace(/\-/g, "/");
	        var d = new Date(parseInt(m[0]));
	        
	       
	        // 按【2012-02-13 09:09:09】的格式返回日期
//	        var tmp  = d.format("yyyy-MM-dd hh:mm:ss");
//	        console.log("格式化时间:   "+tmp);
	        return d.format("yyyy-MM-dd hh:mm:ss");
	    }


  
  	//获取当前时间戳
				function getNow () {
					var timestamp=new Date().getTime();
					return timestamp;
				}
				
  	
  });
  
  	
  
  	
  </script>
</body>
</html>